<template>
	<div class="tmpl">
		<nav-bar-vue title="商品列表"></nav-bar-vue>
		<mt-loadmore :top-method="loadTop"  :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="isAutoFill" ref="loadmore">
			<ul class="mui-table-view mui-grid-view">
				<li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="(item, index) in images" :key="index">
					<router-link :to="{name:'goods.detail', query:{id:item.id}}">
						<img class="mui-media-object" src="../../static/img/shuijiao.jpg">
						<div class="mui-media-body">{{item.price}}￥幸福就是可以一起睡觉</div>
					</router-link>
				</li>
			</ul>
		</mt-loadmore>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				images: [],
				allLoaded : false, //加载完毕， 是否禁止触发上拉 , false不禁止
				isAutoFill: false, //自动触发上啦
				pageNo:1
			}
		},
		created() {
			this.load(1);
		},
		methods: {
			load(pageNo) {
				console.log(pageNo)
				if(!pageNo) {
					pageNo = 1;
				}
				
				if(pageNo >= 5){
					this.pageNo = 4;
					return;
				}

				for(var i = (pageNo - 1) * 10; i < pageNo * 10; i++) {
					var item = {
						src: '',
						price: (i + 1) * 110 / 100,
						id: i
					}
					this.images.push(item);
				}
			},
			loadBottom() {
//				this.allLoaded = true;
				this.load(++this.pageNo);
				this.$refs.loadmore.onBottomLoaded(); // 上啦完结
				console.log("加载更多")
			},
			loadTop(){
				this.images = [];
				this.load(1);
				this.pageNo = 1;
				this.$refs.loadmore.onTopLoaded();
			}
		}
	}
</script>

<style>

</style>